<template>
  <div>
    <el-row :gutter="3">
      <el-col :span="5">
        <el-input type="text" v-model="user.userName" placeholder="请输入账号查询"></el-input>
      </el-col>

      <el-col :span="5">
        <el-input type="text" v-model="user.userNickname" placeholder="请输入昵称查询"></el-input>
      </el-col>

      <el-col :span="5">
        <el-input type="text" v-model="user.userPhone" placeholder="请输入手机号查询"></el-input>
      </el-col>

      <el-col :span="5">
        <el-select placeholder="请选择状态" v-model="user.userState">
          <el-option value="0">正常</el-option>
          <el-option value="1">冻结</el-option>
          <el-option value="2">删除</el-option>
        </el-select>
      </el-col>

      <el-button type="success" round @click="selectButton">点击查询</el-button>
    </el-row>

    <el-table :data="tableData" style="width: 100%" >
      <el-table-column prop="userId" label="用户ID"></el-table-column>
      <el-table-column prop="userName" label="用户名" ></el-table-column>
      <el-table-column prop="userNickname" label="昵称"></el-table-column>
      <el-table-column prop="userPhone" label="手机号"></el-table-column>
      <el-table-column prop="userEmail" label="邮箱"></el-table-column>
      <el-table-column prop="userState" label="状态" width="100">
        <template slot-scope="scope" label="状态">
          <span v-if="scope.row.userState === 0">正常</span>
          <span v-else-if="scope.row.userState === 1">冻结</span>
          <span v-else-if="scope.row.userState === 2">删除</span>

        </template>
      </el-table-column>

      <el-table-column>
        <template slot-scope="scope">
          <el-button type="primary">禁用</el-button>
          <el-button type="warning">启用</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="block">
      <span class="demonstration"></span>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="user.pageNum"
         :page-sizes="[3, 5, 8]"
        :page-size="user.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "AdminInfo",
  data() {
    return {
      tableData:[],
      total: 0,
      user: {
        userName: "",
        userNickname: "",
        userPhone: "",
        userState:"",
        pageNum: 1,
        pageSize: 3,
      }
    }
  },
  methods: {
    selectButton() {
      if(this.user.userState==""){
        this.user.userState=-1;
      }
      this.$http.post("/userInfo/selectUserInfoPage", this.user)
        .then(resp => {
          console.log("Response:", resp);
          if(this.user.userState==-1){
            this.user.userState="";
          }
          this.tableData = resp.data.data.list;

        console.log(this.tableData);
          this.total = resp.data.data.total || 0;
          this.user.pageNum = resp.data.data.pageNum || 1;
          this.user.pageSize = resp.data.data.pageSize || 3;
        })
        .catch(error => {
          console.error("查询失败:", error);
        });
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    },
    handleSizeChange(val) {
      this.user.pageSize = val;
      this.selectButton();
    },
    handleCurrentChange(val) {
      this.user.pageNum = val;
      this.selectButton();
    },
  },
  created() {
    this.selectButton();
  }
}
</script>

<style>
/* 添加您的样式代码 */
</style>
